<template>
  <div>
    <div
      :class="`card p-4 mb-5 has-background-success-dark`"
    >
      <label
        class="label has-text-light"
        v-if="isEditPage"
      >
        编辑事项
      </label>
      <div class="field">
        <div class="control">
          <textarea
            class="textarea"
            maxlength="100"
            :value="modelValue"
            @input="handleInput"
          />
        </div>
      </div>

      <div class="field is-grouped is-grouped-right">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    isEditPage: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String
    }
  })

  const emit = defineEmits(['update:modelValue'])

  const handleInput = (e) => {
    emit('update:modelValue', e.target.value)
  }
</script>

<style lang="less" scoped>

</style>